<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>客户报表</title>
    <#include "../common/link.ftl">

    <script>
        $(function () {
            //时间插件
            $('.datepicker').datepicker({
                language: 'zh-CN',
                autoclose: true,
                todayHighlight: true, // 今天时间高亮
                format: 'yyyy-mm-dd',
                endDate:new Date() // 今天之后的日期都不可以选择
            });


                // 点击图表时打开视图窗口
                $(".chart_btn").click(function () {

                    // 获取点击按钮的url
                    var url = $(this).data("url") //获取当前按钮中data属性中 url的值
                    // 将序列化后的参数，拼接到url中
                    var parms = $("#searchForm").serialize();
                    url = url + "?"+parms;

                    // 使用弹窗显示图表数据
                    var $chartModal = $('#chartModal');

                    // 清除模态旧有数据 // 百度搜索处理的
                    $chartModal.removeData('bs.modal');

                    $chartModal.modal({
                        remote: url
                    });

                    $chartModal.modal('show');
                });


        })

    </script>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include "../common/navbar.ftl">
    <!--菜单回显-->
    <#assign currentMenu="customerReport">
    <#include "../common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>潜在客户报表</h1>
        </section>
        <section class="content">
            <div class="box">
                <!--高级查询--->
                <div style="margin: 10px;">
                    <!--高级查询--->
                   <form class="form-inline" id="searchForm" action="/customerReport/list.do" method="post">
                        <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <div class="form-group">
                            <label for="keyword">员工姓名:</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" value="${(qo.keyword)!""}" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                            <label for="date">时间段查询:</label>
                            <input type="text" class="form-control datepicker" style="width: 100px" id="beginTime" name="beginDate" value="${(qo.beginDate?string('yyyy-MM-dd'))!""}"> -
                            <input type="text" class="form-control datepicker" style="width: 100px" id="endTime" name="endDate" value="${(qo.endDate?string('yyyy-MM-dd'))!""}">
                        </div>
                        <div class="form-group">
                            <label for="status">分组类型:</label>
                            <select class="form-control" id="groupType" name="groupType">
                                <option value="e.name">员工</option>
                                <option value="DATE_FORMAT(c.input_time, '%Y')">每年</option>
                                <option value="DATE_FORMAT(c.input_time, '%Y-%m')">每月</option>
                                <option value="DATE_FORMAT(c.input_time, '%Y-%m-%d')">每日</option>
                            </select>

                            <script>
                                //让这个分组的下拉框选中当前选项
                                //首先freeMarker代码先执行 再渲染静态页面
                                //1.先执行${(qo.groupType)!} 获取了后端的这个参数
                                //2.JS 代码 根据id找到这个select 把val设置成 "${(qo.groupType)!}" 的 值
                                //      即value与这个值相同就选中 记得要加双引号
                                $('#groupType').val("${(qo.groupType)!}");
                            </script>


                            <button id="btn_query" class="btn btn-primary">
                                  <span class="glyphicon glyphicon-search"></span> 查询
                            </button>
                            <button type="button" class="btn btn-info chart_btn" data-url="/customerReport/listForBar.do">
                                <span class="glyphicon glyphicon-stats"></span> 柱状图
                            </button>
                            <button type="button" class="btn btn-warning chart_btn"  data-url="/customerReport/listForPie.do">
                                <span class="glyphicon glyphicon-dashboard"></span> 饼状图
                            </button>
                        </div>

                    </form>
                </div>
                <table class="table table-striped table-hover" >
                    <thead>
                    <tr>
                        <th>分组类型</th>
                        <th>潜在客户数</th>
                    </tr>
                    </thead>
                   <#list result.list as customer>
                       <tr>
                           <td>${customer.groupType}</td>
                           <td>${customer.number}</td>
                       </tr>
                   </#list>
                </table>
                <#include "../common/page.ftl">
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl">
</div>
<div id="chartModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!
</body>
</html>
